<template>
    <div>
        <ul>
            <li v-for="msg in messageList" :key="msg.id">
                <!--路由跳转携带params参数-->
                <!--<router-link :to="`/home/message/detail/${msg.id}/${msg.title}`" >{{ msg.title }}</router-link>&nbsp;&nbsp;-->
                <!--注意路由携带params参数时，如果to使用对象写法，那么必须使用name配置，不能使用path-->
                <router-link :to="{
                    name: 'xiangqing',
                    params:{id:msg.id,title:msg.title}
                }">
                    {{ msg.title }}
                </router-link>&nbsp;&nbsp;
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "Message",
    data() {
        return {
            messageList: [
                {id: '001', title: 'msg001'},
                {id: '002', title: 'msg002'},
                {id: '003', title: 'msg003'},
            ]
        }
    }
}
</script>

<style scoped>

</style>